<template>
  <tbody>
    <tr v-for="(prop, index) in specs.specpropertyList" :key="index">
      <td v-if="index == 0" :rowspan="specLength">
        {{specs.specpropertyName}}
      </td>
      <td v-if="index == 0" :rowspan="specLength">
        <w-input style="width: 80px; display: inline-block" rule="isEmpty|onlyInt"  error="必填项|格式错误" v-model="specs.specpropertyCrowdSum" :disabled="readonly"></w-input>&nbsp;件
      </td>
      <td>{{prop.specpropertyName}}</td>
      <td>
        <w-input style="width: 80px; display: inline-block" rule="isEmpty|onlyInt"  error="必填项|格式错误" v-model="prop.specpropertySmallCount" :disabled="readonly"></w-input>&nbsp;件
      </td>
      <!-- 颜色已拼量 -->
      <td v-if="index == 0 && already" :rowspan="specLength">
        {{checkOutCountAll|| 0}}&nbsp;件
      </td>
      <!--现货，需输入商品数量 -->
      <td v-if="count && goodsType == '1'">
        <w-input style="width: 80px; display: inline-block" rule="isEmpty|onlyInt"  error="必填项|格式错误" v-model="prop.specpropertyInventCount" :disabled="readonly"></w-input>&nbsp;件
      </td>
    </tr>
  </tbody>
</template>

<script>
export default {
  props: {
    specs: {
      type: Object,
      default: () => { return {} }
    },
    index: {
      type: Number,
      default: 0
    },
    readonly: {
      type: Boolean,
      default: false
    },
    already: {
      type: Boolean,
      default: false
    },
    goodsType: [Number, String], // 商品类型
    // 现货商品，需每个sku输入商品数量
    count: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    specLength() {
      // 如果属性没有值
      if (!this.specs.specpropertyList || this.specs.specpropertyList.length == 0) {
        return 1
      }
      return this.specs.specpropertyList.length
    },
    // 各颜色累计发货量
    checkOutCountAll() {
      let count = 0
      if (this.already) {
        this.specs.specpropertyList.forEach(v => {
          if (v.checkOutCount) {
            count += v.checkOutCount
          }
          if (v.colorSum) {
            count += v.colorSum
          }
        })
        return count
      }
      return 0
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
tbody {
  tr {
    height: 50px;
    margin: 5px;
    td {
      text-align: center;
      &:nth-child(1) {
        width: 10%;
      }
      &:nth-child(2) {
        width: 15%;
      }
      &:nth-child(3) {
        width: 10%;
      }
      &:nth-child(4) {
        width: 20%;
      }
      &:nth-child(5) {
        width: 20%;
      }
      &:nth-child(6) {
        width: 15%;
      }
      .delect {
        color: #f00384;
        cursor: pointer;
      }
    }
  }
  .delect-td {
    width: 6%;
    text-align: left;
  }
}
</style>